<template>
  <div :class="{ mainBox1: value, mainBox2: !value }">
    <div class="tablebox">
      <el-menu
        default-active="/home"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :router="true"
      >
        <el-menu-item index="/home" class="menuItem">
          <i class="el-icon-s-opportunity"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/addBlog" class="menuItem">
          <i class="el-icon-s-claim"></i>
          <span slot="title">写博客</span>
        </el-menu-item>
      </el-menu>
    </div>
    <el-container style="height: 900px">
      <el-header style="width: 1200px">
        <div class="logoBox"></div>

        <div class="switchBox">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="black"
            @change="switchChange"
          >
          </el-switch>
        </div>
        <div class="switchText">
            <h4 class="textColor" v-if="value">关灯</h4>
            <h4 class="textColor" v-if="!value">开灯</h4>
        </div>
        <div class="searchBlogBox">
          <el-form :inline="true" :model="findblog" class="demo-form-inline">
            <el-form-item>
              <el-input
                v-model="findblog.title"
                placeholder="搜索作者文章"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                circle=""
                @click="fingBlog"
              ></el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "HomeTable",
  data() {
    return {
      title: "",
      isCollapse: true,
      value: true,
      findblog: {
        title: "",
      },
    };
  },
  methods: {
    switchChange() {
      localStorage.setItem("switchID",this.value);

    },
    onSubmit() {
      console.log("submit!");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    fingBlog() {
      this.findblog.title = this.findblog.title.replace(/\s*/g, "");
      if (this.findblog.title.length > 0) {
        localStorage.setItem("searchBlogID", this.findblog.title);
        this.$router.push("/searchBlog");
        this.findblog.title = "";
      }
    },
  },
  created() {
    this.value = localStorage.getItem("switchID")
    this.$router.push("/home");
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  margin-top: 100px;
  width: 200px;
  min-height: 400px;
  background: #11579e;
}
.menuItem {
  color: #0206db;
  background-color: rgb(248, 198, 122);
}
.el-menu-demo {
  float: left;
}
.tablebox {
  float: left;
  width: 70px;
  height: 200px;
  margin-top: 300px;
}
.mainBox1 {
  width: 100%;
  height: 100vh;
  /* background-image: url("../assets/img/blue.jpeg"); */
  background: #00c3ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ffff1c,
    #00c3ff
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ffff1c,
    #00c3ff
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  position: fixed;
  background-size: cover;
  /* border:1px white solid; */
}
.mainBox2 {
  width: 100%;
  height: 100vh;
  /* background-image: url("../assets/img/blue.jpeg"); */
  background: #141e30; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #243b55,
    #141e30
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #243b55,
    #141e30
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  position: fixed;
  background-size: cover;
  /* border:1px white solid; */
}
.el-header {
  background: rgba(87, 93, 97, 0.4);
  margin-left: 90px;
}
.logoBox {
  float: left;
  width: 60px;
  height: 60px;
  background-image: url("../assets/img/logo.jpeg");
  background-size: cover;
  position: fixed;
}
.searchBlogBox {
  float: right;
  margin-right: 200px;
  width: 300px;
  height: 58px;
}
.textColor{
  color: rgb(232, 248, 4);
}
.switchText{
    float: right;
    margin-right: 10px;
}
.switchBox {
  float: right;
  margin-right: 20px;
  margin-top: 23px;
}
.demo-form-inline {
  margin-top: 10px;
}
.itemBox {
  height: 100%;
  font-size: 30px;
  line-height: 60px;
}
.headImg {
  float: right;
  margin: 10px auto;
  margin-right: 50px;
}
</style>